@import url(./base.less);
@rootSize: 37.5rem;

body {
  background-color: #fff;
  .main {
    padding: 0 (15 / @rootSize);
    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: (46 / @rootSize);

      .wz {
        font-weight: normal;
        margin-right: (26 / @rootSize);
        font-size: (18 / @rootSize);
      }
      .ssk {
        position: relative;
        flex: 1;
        height: (32 / @rootSize);
        i {
            position: absolute;
            left: 16px;
            font-size: (12 / @rootSize);
            color: #ccc;
          }
        button {
           border: 1px solid #ccc;
          height: (32 / @rootSize);
          width: (234 / @rootSize);
          border-radius: (16 / @rootSize);
          font-size: (14 / @rootSize);
          color: #ccc;
          line-height: (32 / @rootSize);
          
        }
      }
      .tub {
        
        width: (20 / @rootSize);
        height: (20 / @rootSize);
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
    .zj {
      margin-top: (12 / @rootSize);
      .banner {
        height: (108 / @rootSize);
        border-radius: (5 / @rootSize);
        box-shadow: 0 0 (10 / @rootSize) rgba(0, 0, 0, 0.3);
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .gh {
        display: flex;
        margin-top: (12 / @rootSize);
        justify-content: space-between;
        margin-right: (10 / @rootSize);
        height: (70 / @rootSize);
        margin-bottom: (10 / @rootSize);
        .left {
            box-shadow: 0 0 (10 / @rootSize) rgba(0, 0, 0, 0.1);
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        .right {
            box-shadow: 0 0 (10 / @rootSize) rgba(0, 0, 0, 0.1);
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
      .bh {
        display: flex;
        justify-content: space-between;

        h4 {
          font-size: (22 / @rootSize);
          color: #000;
        }
        span {
          display: block;
          margin-top: (6 / @rootSize);
          height: (15 / @rootSize);
          img {
            height: 100%;
          }
        }
      }
      .ncv {
        margin-top: (10 / @rootSize);
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .pic {
          img {
            width: (165 / @rootSize);
            height: (115 / @rootSize);
          }
          h5 {
            margin-top: (10 / @rootSize);
            font-size: (18 / @rootSize);
            color: #000;
          }
          p {
            margin-top: (8 / @rootSize);
            font-size: (14 / @rootSize);
            color: #999;
          }
          span {
            margin-top: (12 / @rootSize);
            display: block;
            color: #f39800;
            font-size: (16 / @rootSize);
            i {
                font-style: normal;
            }
          }
        }
      }

      .mkl {
        margin-bottom: (36 / @rootSize);
        margin-top: (30 / @rootSize);
        height: (56 / @rootSize);
        border-radius: (5 / @rootSize);
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .nav {
        .wenb {
          display: flex;
          justify-content: space-between;
          .tj {
            font-size: (18 / @rootSize);
            color: #333;
          }
          .he {
            display: flex;
            flex-direction: column;
            font-size: (16 / @rootSize);
            height: (20 / @rootSize);
            width: (40 / @rootSize);
            line-height: (16 / @rootSize);
            text-align: center;
            border-bottom: 1px solid #1ca8f1;
          }
          span {
            color: #999;
            font-size: (16 / @rootSize);
            margin-right: (20 / @rootSize);
          }
        }
      }
      .box {
        margin-top: (24 / @rootSize);
        ul {
          li {
            display: flex;
            justify-content: space-between;
            margin-top: (18 / @rootSize);
            .pic {
              width: (110 / @rootSize);
              height: (80 / @rootSize);
              margin-left: (16 / @rootSize);
              border-radius: (5 / @rootSize);
              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: (5 / @rootSize);
              }
            }
            .text {
              font-size: (14 / @rootSize);
              color: #999;
              h5 {
                font-size: (16 / @rootSize);
                color: #333;
              }
            }
            p {
              width: (206 / @rootSize);
              margin-top: (8 / @rootSize);
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
            }
            .mlh {
              display: flex;

              margin-top: (8 / @rootSize);
              a {
                display: block;
                border: 1px solid #999;
                width: (45 / @rootSize);
                height: (20 / @rootSize);
                margin: 0 (10 / @rootSize);
                color: #999;
                line-height: (20 / @rootSize);
                text-align: center;
              }
            }
            .nm {
              margin-top: (8 / @rootSize);
              color: #f39800;
              span {
                font-size: (12 / @rootSize);
              }
            }
          }
        }
      }
    }
    .dui {
      display: flex;
      justify-content: center;
      button {
        width: (260 / @rootSize);
        height: (38 / @rootSize);
        background-color: #f2f3f3;
        margin-top: (20 / @rootSize);
        border-radius: (19 / @rootSize);
        text-align: center;
        line-height: (38 / @rootSize);
        color: #999;
        font-size: (14 / @rootSize);
        border: 1px solid #ccc;
      }
    }
    .vb {
      height: (85 / @rootSize);
      margin-top: (24 / @rootSize);
      border-radius: (10 / @rootSize);
    }
  }
  .footer {
    width: 100%;
    height: (50 / @rootSize);
    margin-top: (12 / @rootSize);
    box-shadow: 0 0 (10 / @rootSize) rgba(0, 0, 0, 0.1);
    ul {
      height: (50 / @rootSize);
      align-items: center;
      display: flex;
      li {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        p {
          font-size: (14 / @rootSize);
          text-align: center;
        }
      }
    }
  }
}
